<!DOCTYPE html>
<html>
<head>
	<title>职位调动列表</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

	<!-- 所有的 css 资源 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">

	<!-- 所有的 js 资源 -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>

	<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../static/kj/laydate/laydate.js"></script>
	<script src="../../static/sa.js"></script>

	<style type="text/css">

	</style>

</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div id="vue-box" style="display: none;" :style="'display: block;'">

	<!-- 参数栏 -->
	<div class="c-panel">
		<div class="c-title">查找调动记录</div>
		<el-form ref="form">

			<div class="c-item">
				<label class="c-label">调动记录：</label>
				<el-input size="mini" v-model="p.change_id" placeholder="请输入调动记录"></el-input>
			</div>
			<div class="c-item">
				<label class="c-label">员工编号：</label>
				<el-input size="mini" v-model="p.job_id" placeholder="请输入员工编号"></el-input>
			</div>
			<div class="c-item">
				<label class="c-label">调动前：</label>
				<el-select v-model="p.beforedp_id"  size="mini" placeholder="请选择部门" filterable clearable>
					<el-option
							v-for="item in departmentsList"
							:key="item.department_id"
							:label="item.department"
							:value="item.department_id">
					</el-option>
				</el-select>

			</div>
			<div class="c-item">
				<label class="c-label">调动后：</label>
				<el-select v-model="p.afterdp_id" size="mini" placeholder="请选择部门" filterable clearable>
					<el-option

							v-for="item in departmentsList"
							:key="item.department_id"
							:label="item.department"
							:value="item.department_id">
					</el-option>
				</el-select>
			</div>
			<div class="c-item">
				<label class="c-label">调动时间：</label>
				<el-date-picker
						size="mini"
						v-model="p.changetime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择日期">
				</el-date-picker>
			</div>

			<div class="c-item" style="min-width: 0px;">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="findfit">查询</el-button>
			</div>

			<br />


		</el-form>

	</div>

	<!-- 数据栏 -->
	<div class="c-panel">
		<div class="c-title">调动信息列表</div>
		<el-table class="data-table" :data="alljobChangeslist" size="mini"  style="width: 100%">
			<el-table-column label="调动记录" prop="change_id" width="100px" sortable> </el-table-column>
			<el-table-column label="工号" prop="job_id" sortable> </el-table-column>
			<el-table-column label="调动前" prop="beforedp_name" sortable> </el-table-column>
			<el-table-column label="调动后" prop="afterdp_name" sortable> </el-table-column>
			<el-table-column label="调动时间" prop="changetime" sortable></el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="danger"class="c-button" icon="el-icon-delete" @click="deletejobchange(scope.row)">删除</el-button>

				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="page-box">
			<el-pagination background
						   layout="total, prev, pager, next, sizes, jumper"
						   :current-page.sync="page.pageNo"
						   :page-size.sync="page.pageSize"
						   :total="page.count"
						   :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
						   @current-change="f5(true)"
						   @size-change="f5(true)">
			</el-pagination>
		</div>

	</div>


	<br><br><br><br><br><br><br><br><br>


</div>

<script>
	// 定义一个 Vue 全局的过滤器，名字叫做  sexFormat
	Vue.filter('sexFormat', function (val) {
		if(val===1){
			return '男'
		}else if(val===0){
			return '女'
		}
	})

	var app = new Vue({
		el: '#vue-box',
		data:{
			p:{
				change_id: "",
				job_id:"",
				beforedp_id: "",
				afterdp_id: "",
				changetime: ""
			},
			page: {	// 分页信息
				pageNo: 1,
				pageSize: 10,
				count: 30
			},
			alljobChangeslist:[
				{
					change_id: 1,
					job_id: "小马哥",
					beforedp_name: "工程部",
					afterdp_name: "事业部",
					beforedp_id: 1,
					afterdp_id: 2,
					changetime: "2016-01-01"
				}
			],
			departmentsList:[],
		},



		created: function () {
			this.getData();
			this.getDepartment();
		},


		methods: {

			getDepartment:function(){
				var that = this
				axios.post('http://localhost:9900/getallDepartment').then(function (res) {

					//把从json获取的数据赋值给数组
					var data = res.data.alldepartmentslist
					that.departmentsList = data
				}).catch(function () {
					console.log('失败')
				})
			},

			//刷新数据
			getData:function(){
				var that = this
				axios.post('http://localhost:9900/getAllJobChange').then(function (res) {

					//把从json获取的数据赋值给数组
					var data = res.data.alljobChangeslist
					that.alljobChangeslist = data
					console.log(that.alljobChangeslist)

				}).catch(function () {
					console.log('失败')
				})
			},

			// 分页刷新
			pageNo_f5: function(pageNo) {
				this.$message('切换当前页：' + pageNo);
				this.f5();
			},
			pageSize_f5: function(pageSize) {
				this.$message('切换页大小：' + pageSize);
				this.f5();
			},

			// 删除记录
			deletejobchange: function(data) {
				var that = this
				layer.confirm('确定删除此记录？', {icon: 3, title:'提示'}, function(index){
					$.ajax({
						type: 'POST',
						url: 'http://localhost:9900/deletejobchange',
						data: {id:data.change_id},
						success: function(){

							layer.alert('删除成功', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
							that.getData()
						},
						error: function(){
							layer.alert('删除失败', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
						}
					});
				});

			},


			// 部门模糊查询
			findfit: function() {

				var that = this

				$.ajax({
					type: 'POST',
					url: 'http://localhost:9900/getfitJobChange',
					data: {
						change_id:that.p.change_id,
						job_id:that.p.job_id,
						beforedp_id:that.p.beforedp_id,
						afterdp_id:that.p.afterdp_id,
						changetime:that.p.changetime
					},
					success: function(res){

						layer.alert('查询成功', {
							skin: 'layui-layer-molv'
							,closeBtn: 0
							,anim: 4
						});
						console.log(res)
						that.alljobChangeslist=res
					},
					error: function(){
						layer.alert('查询失败', {
							skin: 'layui-layer-molv'
							,closeBtn: 0
							,anim: 4
						});
					}
				});

			}
		}
	})
</script>


</body>
</html>
